<template>
  <el-card class="tableBox">
    <template #header>
      <div class="card-header">
        <span>角色列表</span>
        <div>
          <el-button
            class="button"
            type="primary"
            @click="dialogFormVisible = true"
            >添加安保</el-button
          >
          <el-button class="button" type="danger" @click="deleteSelectedInfo"
            >删除所选信息</el-button
          >
        </div>
      </div>
    </template>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="workId" label="员工ID" />
      <el-table-column prop="workName" label="姓名" />
      <el-table-column prop="workPartId" label="园区ID" />
      <el-table-column label="工作状态">
        <template #default="props">
          <el-tag class="ml-2" :type="tagMap[props.row.workStatus]?.type">{{
            tagMap[props.row.workStatus]?.info
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="workPhone" label="电话号" />
      <!--      <el-table-column fixed="right" label="操作" width="120px">-->
      <!--        <template #default="scope">-->
      <!--          <el-button type="danger" @click.prevent="deleteRow(scope.$index)">-->
      <!--            删除-->
      <!--          </el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
    </el-table>
    <div class="paginationBox">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 添加安保表单对话框 -->
  <el-dialog v-model="dialogFormVisible" title="安保信息">
    <el-form :model="form">
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="form.workStatus" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工号" :label-width="formLabelWidth">
        <el-input v-model="form.workId" />
      </el-form-item>
      <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="form.workName" />
      </el-form-item>
      <el-form-item label="所在园区" :label-width="formLabelWidth">
        <el-input v-model="form.workPartId" />
      </el-form-item>
      <el-form-item label="电话号" :label-width="formLabelWidth">
        <el-input v-model="form.workPhone" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addSecurityMan"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useSecurityStoreHook } from "@/store/modules/security";
import { message } from "@/utils/message";

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  loadingInfo();
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  loadingInfo();
};

// 获取列表信息
let loading = true;
const total = ref(100);
const securityStore = useSecurityStoreHook();
const tableData = ref([]);

async function loadingInfo() {
  await securityStore.getSecurityInfo(currentPage.value, pageSize.value);
  loading = false;
  total.value = securityStore.total;
  tableData.value = securityStore.securityManList;
}
loadingInfo();

// 多选框信息
const selectedInfo = ref([]);
const handleSelectionChange = val => {
  selectedInfo.value = val;
};

// 删除用户多选信息
const deleteSelectedInfo = async function () {
  const data = new Array<number>(selectedInfo.value.length);
  if (data.length == 0) {
    message("请选择要删除的员工");
    return;
  }
  for (let i = 0; i < data.length; i++) {
    data[i] = selectedInfo.value[i].workId;
  }
  await securityStore.deleteSecurityMan(data);
  tableData.value = securityStore.securityManList;
};

// 选择框对应状态
const options = [
  {
    value: "0",
    label: "空闲"
  },
  {
    value: "1",
    label: "忙碌"
  }
];

// 获取工作状态对应Tag
const tagMap = {
  0: {
    info: "空闲",
    type: "success"
  },
  1: {
    info: "忙碌",
    type: "warning"
  }
};

// 对话框表单相关
const dialogFormVisible = ref(false);
const formLabelWidth = "100px";
const form = reactive({
  workId: "",
  workName: "",
  workPartId: "",
  workStatus: "",
  workPhone: "",
  workAppid: ""
});
const addSecurityMan = async function () {
  await securityStore.addSecurityMan({
    workId: parseInt(form.workId),
    workName: form.workName,
    workIdentity: 0,
    workPartId: parseInt(form.workPartId),
    workStatus: parseInt(form.workStatus),
    workPhone: form.workPhone,
    workAppid: parseInt(form.workAppid)
  });
  form.workId = "";
  form.workName = "";
  form.workPartId = "";
  form.workStatus = "";
  form.workPhone = "";
  form.workAppid = "";
  dialogFormVisible.value = false;
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tableBox {
  margin-top: 20px;
}

.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
